import React, {useEffect, useRef} from "react";
import {createStyles} from "antd-style";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            background-color: ${token.colorPrimaryBg};
            z-index: -2;
            .bgImage {
                width: 100vw;
                height: 100vh;
                position: fixed;
                left: 0;
                top: 0;
                z-index: -1;
                object-position: center;
                object-fit: cover;
                opacity: 100;
            }
            .bgImageTransition {
                transition: all 1s ease-in-out;
            }
            .bgImageLoading {
                opacity: 0;
                transform: scale(2);
            }
        `,
    }
})

const BackgroundImage: React.FC = () => {
    const styles = useStyles().styles;
    const bgImage = useRef<HTMLImageElement>()

    useEffect(() => {
        const img = bgImage.current;
        img.onload = () => {
            img.classList.remove('bgImageLoading')
            setTimeout(() => {
                img.classList.remove('bgImageTransition')
            }, 2000)
        }
    }, []);

    return (
        <div className={styles.container}>
            <img ref={bgImage}
                 className="bgImageLoading bgImageTransition bgImage"
                 src="https://tu.ltyuanfang.cn/api/fengjing.php"
                 alt="背景"
            />
        </div>
    )
}

export default BackgroundImage